<template>
<div>
    <H1>ChatRoom</H1>
    <el-row style="margin-bottom: 30px">
        <el-input v-model="broad.message" style="width: 300px;"></el-input>
        <el-button @click="sendBroad" style="margin-left: 20px">发送广播消息</el-button>
        <el-button @click="joinGroup" style="margin-left: 20px" type="primary" :disabled="onGroup">加入群聊</el-button>
    </el-row>
    <JwChat-index :taleList="list" @enter="bindEnter" v-model="inputMsg" :toolConfig="tool" :config="config">
        <JwChat-rightbox :config="rightConfig" @click="rightClick" />
    </JwChat-index>

</div>
</template>

<script>
export default {
    name: "talk",
    data() {
        return {
            broad: {
                message: ''
            },
            onGroup: false,
            JoinRequest: {
                userID: '',
                groupID: '546'
            },
            //存储聊天内容
            list: [],
            inputMsg: '',
            tool: {
                show: ['file', 'history', 'img'],
                callback: this.toolEvent,
                showEmoji: true,
            },

            rightConfig: {
                listTip: '当前在线',
                // notice: '【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
                list: [{
                    name: 'JwChat',
                    "img": "../image/three.jpeg"
                }, ]
            },
            config: {
                img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602402290619&di=17c377469ba0109ee99aa9cfd7728325&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
                name: 'JwChat',
                dept: '最简单、最便捷',
                callback: this.headerEvent
            },
        }
    },
    methods: {
        //输入数据
        bindEnter() {
            const msg = this.inputMsg
            if (!msg) return;
            const msgObj = {
                "date": "2020/05/20 23:19:07",
                "text": {
                    "text": msg
                },
                "mine": true,
                "name": "JwChat",
                "img": "../image/three.jpeg"
            }
            // this.list.push(msgObj)
            const GropRequest = {

                "fromuid": this.JoinRequest.userID,
                "gropid": this.JoinRequest.groupID,
                "message": this.inputMsg
            }
            this.$socket.emit('group', GropRequest);
        },
        toolEvent(type) {
            console.log('tools', type)
        },
        headerEvent(type) {
            console.log('header', type)
        },
        rightClick(type) {
            console.log('rigth', type)
        },

        //广播消息
        sendBroad() {
            this.$axios.post("api/send/broad", this.broad).then((res) => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        },
        //加入群聊
        joinGroup() {
            console.log(this.JoinRequest.userID)
            console.log(this.JoinRequest.groupID)
            this.onGroup = true
            this.$socket.emit('join', this.JoinRequest);
        }

    },
    //组件挂载之前，初始化
    mounted() {
        //获取前端自动生成的ID
        let uid = this.$store.getters.getUid;
        this.JoinRequest.userID = uid;
        console.log(this.JoinRequest.userID)
        //监听broadcast频道消息
        // this.$socket.emit('broadcast', {subscribe: true})
        //监听Join频道消息
        // this.$socket.emit('join',{subscribe: true})

    },
    sockets: { // 通过vue实例对象sockets实现组件中的事件监听
        connect: function () { // socket的connect事件
            console.log('socket connected from Page')
            this.$message.success("服务器连接完成")
        },
        disconnect: function () {
            this.$message.error("与服务器断开连接");
        },
        //后端按主题名推送的消息数据
        broadcast(data) {
            console.log(data)
            const msgObj = {
                "date": "2020/05/20 23:19:07",
                "text": {
                    "text": data.message
                },
                "mine": false,
                "name": "系统管理员",
                "img": "../image/three.jpeg"
            }
            this.list.push(msgObj)
        },
        join(data) {
            console.log(data)
            const msgObj = {
                "date": "2020/05/20 23:19:07",
                "text": {
                    "text": "欢迎用户【" + data.userID + "】加入群聊"
                },
                "mine": false,
                "name": "系统管理员",
                "img": "../image/three.jpeg"
            }
            this.list.push(msgObj)
            this.$message.success("群聊加入成功")
        },
        group(data) {
            console.log(data)
            if (data.gropid == "-1") {
                this.$message.error(data.message)
            } else {
                const msgObj = {
                    "date": "2020/05/20 23:19:07",
                    "text": {
                        "text": data.message
                    },
                    "mine": this.JoinRequest.userID == data.fromuid,
                    "name": data.fromuid,
                    "img": "../image/three.jpeg"
                }
                this.list.push(msgObj)
            }

        },
        //观测在线人数
        watch(data) {
            console.log(data)
            console.log(data.length)
            this.rightConfig.list = data

        },

    },
}
</script>

<style scoped>

</style>
